<template>
  <div class="container">
    <component v-for="(item, index) in columns" :key="index" :is="item" />
  </div>
</template>

<script setup>
import { ref, onMounted, useSlots } from "vue";
import { context } from "./hook/index";
const slot = useSlots().default();
const props = defineProps(["data"]);
let res = props.data.reduce((obj, item, index) => {
  let names = Object.keys(item);
  names.forEach(name => {
    if (obj[name] === undefined) {
      obj[name] = [];
    }
    obj[name].push(item[name]);
  });
  return obj;
}, {});
context.value = res;
let columns = slot.filter(item => {
  if (item.props.label) {
    item._data = res[item.props.prop];
  }
  return item.type.name === "Column";
});
</script>
<style scoped>
.container {
  display: flex;
  gap: 2%;
  justify-content: space-between;
  flex-basis: 100%;
}
</style>
